/*
 * Copyright (c) 2025 UCT Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/

import { _TableName_ViewModel, edit_TableName_Params, _table_name_, getDB } from 'commondb';

@ComponentV2
export struct _TableName_ItemView {
  @Param _table_name_Item: _table_name_ = new _table_name_();
  @Event delete_TableName_: () => void = () => {};
  @Event edit_TableName_: () => void = () => {};
  @Local breakPoint: string = '';

  async aboutToAppear() {
  }

  build() {
    Column() {
      // 主要内容区域
      Column() {
        // 遍历所有属性显示
        ForEach(_TableName_ViewModel.getKeys(), (key: string) => {
          Row() {
            // 左侧属性名
            Text(key)
              .fontSize(16)
              .fontWeight(FontWeight.Medium)
              .width('30%')
              .margin({ left: 16 })

            // 右侧属性值
            Text(_TableName_ViewModel.getValue(this._table_name_Item, key))
              .fontSize(16)
              .width('65%')
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
          }
          .width('100%')
          .height(20)
          .alignItems(VerticalAlign.Center)
        })
        // 底部操作按钮区
        Row() {
          Button({ type: ButtonType.ROUNDED_RECTANGLE }) {
            Row() {
              SymbolGlyph($r('sys.symbol.plus_square'))
                .fontSize(20)
              Text($r('app.string.edit'))
                .fontSize(20)
                .margin({ left: 4 })
            }
          }
          .onClick(() => this.edit_TableName_())
          .margin({ right: 8 })

          Button({ type: ButtonType.ROUNDED_RECTANGLE }) {
            Row() {
              SymbolGlyph($r('sys.symbol.trash'))
                .fontSize(20)
              Text($r('app.string.delete'))
                .fontSize(20)
                .margin({ left: 4 })
            }
          }
          .onClick(() => this.delete_TableName_())
          .backgroundColor(Color.Red)
        }
        .width('100%')
        .justifyContent(FlexAlign.End)
        .padding(16)
      }
      .padding(16)
      .backgroundColor(Color.White)
      .borderRadius(16)
    }
    .width('100%')
    .backgroundColor('#F5F5F5')
    .borderRadius(16)
    .margin({ bottom: 16 })
  }
}